<template>
  <div class="SearchFilter w">
    <!--显示已选关键词-->
    <div class="keywords clearfix">
      <div class="keywords_nav">
        <div class="keywords_nav_first">全部商品</div>
        <i class="crumbs-arrow">></i>
        <div
          class="keywords_select"
          v-for="(filter, index) in filters"
          :key="index"
        >
          {{ filter }}<i @click="removefilter(index)"></i>
        </div>
        <div class="keyword_item">
          <strong>" {{ keyword }} "</strong>
        </div>
      </div>
    </div>
    <!--搜索条件筛选-->
    <div class="selector">
      <div class="sl-line clearfix" v-for="(item,index) in FilterBrand" :key="index">
        <div class="sl-key">{{item.title}}</div>
        <div class="sl-value">
          <div
            class="sl-value-item"
            v-for="(brand, index) in item.context"
            :key="index"
            @click="addfilter(brand)"
          >
            {{ brand }}
          </div>
        </div>
      </div>

      <div class="sl-line"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    FilterBrand: Array,
    filter:String,
  },
  data() {
    return {
      keyword: "",
      filters: [],
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      let classify = this.$route.query.classify;
      this.keyword = classify;
      if(this.filter!=null){
        this.addfilter(this.filter);
      }
      let name = this.$route.query.name;
      if(name!=null){
        this.addfilter(name);
      }

    });
  },
  methods: {
    addfilter: function (key) {
      if (this.filters.findIndex(res => res == key) == -1&&key!="") {
        this.filters.push(key);
      }
    },
    removefilter: function (index) {
      this.filters.splice(index, 1);
    },
    //提交新条件给父组件
    submitfilter:function(){
      this.$emit("modifyfilter",this.filters);
    }
  },
  watch:{
    filters:{
      handler(){
        this.submitfilter();
      },
      deep:true
    }
  }
};
</script>

<style scoped>
.w {
  width: 1300px;
  margin: 0 auto;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.keywords {
  position: relative;
  height: 30px;
  padding-top: 15px;
  margin-bottom: 5px;
}
.keywords .keywords_nav {
  line-height: 24px;
}
.keywords .keywords_nav .keywords_nav_first {
  float: left;
}
.keywords .keywords_nav .crumbs-arrow {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue", "Hiragino Sans GB", SimSun, serif;
  font-style: normal;
}
.keywords .keywords_nav .keywords_select {
  position: relative;
  float: left;
  height: 22px;
  line-height: 18px;
  border: 1px solid #ddd;
  font-size: 12px;
  vertical-align: top;
  margin: 0 5px 5px 2px;
  padding: 0 26px 0 4px;
  cursor: pointer;
  background: #f3f3f3;
}
.keywords .keywords_nav .keywords_select:hover {
  border: 1px solid #005aa0;
}
.keywords .keywords_nav .keywords_select i {
  display: block;
  position: absolute;
  width: 25px;
  height: 22px;
  right: 0;
  top: 0;
  background: url(../assets/search.ele.png) no-repeat 7px -140px;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 7px;
  background-position-y: -140px;
}
.keywords .keywords_nav .keywords_select:hover i {
  background-color: #005aa0;
  background-position: 7px -158px;
}
.keywords .keywords_nav .keyword_item {
  float: left;
  margin-left: 5px;
}

.selector {
  margin-top: 30px;
}
.selector .sl-line {
  height: 40px;
  line-height: 40px;
  margin-bottom: 1px;
  border-top: 1px solid #ddd;
}
.selector .sl-line .sl-key {
  float: left;
  width: 120px;
  padding-left: 10px;
  font-weight: 900;
  background-color: #f3f3f3;
}
.selector .sl-line .sl-value {
  float: left;
}
.selector .sl-line .sl-value .sl-value-item {
  float: left;
  color: #005aa0;
  margin: 0 15px 0 15px;
}
.selector .sl-line .sl-value .sl-value-item:hover {
  color: #e4393c;
}
</style>